<!--价值观考核管理-->

<template>
  <div class="mod-config">
    <div v-if="valueManagerListShow">

      <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
        <el-form-item label="季度">
          <el-select v-model="dataForm.quarterTime" placeholder="请选择">
            <el-option
              v-for="item in dateTime"
              :key="item.val"
              :label="item.label"
              :value="item.val"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select v-model="dataForm.tagId" placeholder="全部">
            <el-option
              v-for="item in options"
              :key="item.val"
              :label="item.label"
              :value="item.val"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运营评价结果" v-if="isShow">
          <el-select v-model="dataForm.avgWholeScore" placeholder="全部">
            <el-option
              v-for="item in evaluationResult"
              :key="item.val"
              :label="item.label"
              :value="item.val"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.nickname" placeholder="昵称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.phone" placeholder="手机号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">查询</el-button>
          <el-button type="primary" @click="download()">下载数据</el-button>
          <!--        <el-button type="primary" @click="setbig()">查看大图</el-button>-->
        </el-form-item>
      </el-form>
      <!--    列表-->
      <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
        <!--<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
        <el-table-column prop="examResultRank" header-align="center" align="center" label="季度考核结果排序">
          <template slot-scope="scope">
            <span>{{ scope.row.examResultRank === null ? "——" : scope.row.examResultRank}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" header-align="center" align="center" label="昵称"></el-table-column>
        <el-table-column prop="coverUrl" header-align="center" align="center" label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" style="width: 40px;height: 40px;"/>
          </template>
        </el-table-column>
        <el-table-column prop="phone" header-align="center" align="center" label="手机号"></el-table-column>
        <el-table-column prop="userGrade" header-align="center" align="center" label="会员身份">
          <template slot-scope="scope">
            {{scope.row.userGrade==1 ?'会员':''}}
            {{scope.row.userGrade==2 ?'经理':''}}
            {{scope.row.userGrade==3 ?'总监':''}}
          </template>
        </el-table-column>
        <el-table-column prop="tagName" header-align="center" align="center" label="标签">
          <template slot-scope="scope">
            <span>{{ scope.row.tagName === null ? "——" : scope.row.tagName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="valueConceptTotalScore" header-align="center" align="center" label="价值观总得分">
          <template slot-scope="scope">
            <span>{{ parseInt(scope.row.valueConceptTotalScore) === 0 ? '——' : scope.row.valueConceptTotalScore}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="selfEvaluationScore" header-align="center" align="center" label="自评">
          <template slot-scope="scope">
            <span
              style="color: #aa1111">{{(parseInt(scope.row.selfEvaluationScore) === 0 && isShow) ? '未评' : ""}}</span>
            <span>{{parseInt(scope.row.selfEvaluationScore) === 0?"":scope.row.selfEvaluationScore}}</span>
            <span>{{!isShow && scope.row.selfIsDefaultScore===1?"0(默认)":""}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="superiorEvaluationScore" header-align="center" align="center" label="管家评价">
          <template slot-scope="scope">
            <span style="color: #aa1111">{{parseInt(scope.row.superiorEvaluationScore) === 0 && isShow && scope.row.hasSuperior===1 ? '未评' : ""}}</span>
            <span>{{parseInt(scope.row.superiorEvaluationScore) === 0?"":scope.row.superiorEvaluationScore}}</span>
            <span>{{scope.row.hasSuperior===1?"":"(无管家)"}}</span>
            <span>{{(!isShow && scope.row.superiorIsDefaultScore===1 && scope.row.hasSuperior===1)?"(默认)":""}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="staffMemberEvaluationScore" header-align="center" align="center" label="运营评价结果">
          <template slot-scope="scope">
            <span style="color: #aa1111">{{(parseInt(scope.row.staffMemberEvaluationScore) === 0 && isShow)? '未评' : "" }}</span>
            <span>{{(parseInt(scope.row.staffMemberEvaluationScore) === 0)?"":scope.row.staffMemberEvaluationScore}}</span>
            <span>{{(!isShow && scope.row.staffMemberIsDefaultScore===1)?"(默认)":""}}</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="管家服务考核评价情况（已评/未评）">
          <template slot-scope="scope">
            <span>{{scope.row.commentNum }}/{{scope.row.allCommentNum}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="assistEvaluationScore" header-align="center" align="center" label="管家服务考核总得分">
          <template slot-scope="scope">
            <span>{{ isShow ? '——' : "" }}</span>
            <span>{{isShow ?"":scope.row.assistEvaluationScore}}</span>
            <span>{{scope.row.hasSubordinate===1?"":"(无下级)"}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="valueConceptGrade" header-align="center" align="center" label="价值观考核结果等级">
          <template slot-scope="scope">
            <span>{{ scope.row.valueConceptGrade === 1 ? '优秀' : '' }}</span>
            <span>{{ scope.row.valueConceptGrade === 2 ? '良好' : '' }}</span>
            <span>{{ scope.row.valueConceptGrade === 3 ? '待提升' : '' }}</span>
            <span>{{ scope.row.valueConceptGrade === 0 ? '——' : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="assistEvaluationGrade" header-align="center" align="center" label="管家服务考核等级">
          <template slot-scope="scope">
            <span>{{ scope.row.assistEvaluationGrade === 1 ? '优秀' : '' }}</span>
            <span>{{ scope.row.assistEvaluationGrade === 2 ? '良好' : '' }}</span>
            <span>{{ scope.row.assistEvaluationGrade === 3 ? '待提升' : '' }}</span>
            <span>{{ scope.row.assistEvaluationGrade === 0 ? '——' : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ratio" header-align="center" align="center" label="下一季度提现服务系数">
          <template slot-scope="scope">
            <span>{{ scope.row.ratio.toFixed(1)}}</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" :label=elevationTitle>
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="viewResult(scope.row, dataForm.quarterTime,isShow)">查看
            </el-button>
            <!--<el-button v-if="scope.row.staffMemberEvaluationScore === 0 && isShow" type="text" size="small"-->
            <!--@click="operationalEvaluationAction(scope.row.userId)">运营评价-->
            <!--</el-button>-->
            <el-button v-if="(parseInt(scope.row.staffMemberEvaluationScore) === 0 && isShow)?true:false" type="text"
                       size="small"
                       @click="operationalEvaluationAction(scope.row.id,0)">运营评价
            </el-button>
            <!--          <el-button type="text" size="small"-->
            <!--                     @click="operationalEvaluationAction(scope.row.id,0)">运营评价-->
            <!--          </el-button>-->
            <el-button v-if="scope.row.isJackie == 1 && isShow" type="text" size="small"
                       @click="evaluationSubordinatesAction(scope.row.userId)">评价下级
            </el-button>
            <el-button v-if="(parseInt(scope.row.staffMemberEvaluationScore) != 0 && isShow)?true:false" type="text"
                       size="small"
                       @click="operationalEvaluationAction(scope.row.id, 1)">修改运营评价
            </el-button>
          </template>
        </el-table-column>
        <el-table-column v-if="(!isShow && dataForm.quarterTime===dateTime[dateTime.length-1].val)"
                         header-align="center" align="center" label="提现服务系数">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="withdrawServicesAction(scope.row.userId,scope.row.ratio)">修改
            </el-button>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.tagName === null ?true:false" type="text" size="small"
                       @click="pasteTagNameAction(scope.row.userId)">贴标签
            </el-button>
            <el-button v-if="scope.row.tagName != null ?true:false" type="text" size="small"
                       @click="cancleTagNameAction(scope.row.userId,scope.row.tagId)">取消标签
            </el-button>
            <el-button v-if="scope.row.tagName != null ?true:false" type="text" size="small"
                       @click="changeTagNameAction(scope.row.userId,scope.row.tagId)">更改标签
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>

    </div>

    <el-dialog title="选择标签" :close-on-click-modal="false" :visible.sync="pasteTagNameViewShow"
    >
      <el-form :inline="true" :model="dataForm">
        <el-form-item label="请选择标签：">
          <el-select v-model="dataForm.diaLogTagName" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.val"
              :label="item.label"
              :value="item.val"
            ></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="pasteTagNameViewShow = false">取消</el-button>
      <el-button type="primary" @click="pasteTagNameDialogAction()">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="取消标签" :close-on-click-modal="false" :visible.sync="cancleTagNameViewShow"
    >
      <span slot="footer" class="dialog-footer">
      <el-button @click="cancleTagNameViewShow = false">取消</el-button>
      <el-button type="primary" @click="cancleTagNameDialogAction()">确定</el-button>
    </span>
    </el-dialog>

    <el-dialog title="提现服务系数修改" :close-on-click-modal="false" :visible.sync="withdrawServicesViewShow"
    >
      <el-form :model="dataForm">
        <el-form-item label="选择时间">
          <el-radio v-model="radio" label="1">修改本季度</el-radio>
        </el-form-item>
        <el-form-item label="提现服务系数">
          <el-input v-model="dataForm.withdrawServices" style="width: 100px;" placeholder="1.0" clearable
                    type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="withdrawServicesViewShow = false">取消</el-button>
        <el-button type="primary" @click="withdrawServicesDialogAction()">确定</el-button>
      </span>
    </el-dialog>

    <value-manage-evaluation-sub-list v-if="evaluationSubordinatesViewShow" ref="evaluationSubordinatesView"
                                      @goback="goBack"></value-manage-evaluation-sub-list>

    <result-show v-if="resultShow" ref="resultShow" @goback="backcon"></result-show>
    <examine-evaluate ref="examinevaluate" @refreshDataList="getDataList"></examine-evaluate>
    <bigimg :bigimgsrc="bigsrc" v-if="showbig" @hideimg="hidebig"></bigimg>
  </div>

</template>

<script>
    import ValueManageEvaluationSubList from "./valueManageEvaluationSubList";
    import ResultShow from './resultShow'
    import ExamineEvaluate from './examinevaluate'
    import bigimg from '@/components/bigimg/index'

    export default {
        name: "valueManageList",
        components: {ValueManageEvaluationSubList, ResultShow, ExamineEvaluate, bigimg},
        data() {
            return {
                showbig: false,
                bigsrc: '',
                resultShow: false,
                options: [
                    {
                        val: null,
                        label: "全部"
                    },
                ],
                //季度时间
                dateTime: [],
                //评价结果
                evaluationResult: [
                    {
                        val: "3",
                        label: "全部"
                    },
                    {
                        val: "1",
                        label: "已评价"
                    },
                    {
                        val: "0",
                        label: "未评价"
                    }
                ],
                //diologTag
                diologTag: [],

                dataForm: {
                    quarterTime: "", // quarterTime:季度（201901是2019第一季度，201904第二季度，以此类推）
                    userGrade: "", //   userGrade:会员身份
                    avgWholeScore: "3",  //     avgWholeScore:0未评、1已评 3全部
                    subordinateGrade: "", //  1为优秀 2为良好 3为待提升 ,
                    key: "",
                    rember: "",
                    uid: "",
                    phone: "",
                    nickname: "",
                    title: "",
                    diaLogTagName: "",
                    withdrawServices: ""
                },
                isShow: true, // 开发评价 true 已评价完fasle
                valueManagerListShow: true, // 价值观考核管理列表是否显示 true显示 fasle隐藏
                evaluationSubordinatesViewShow: false, // 评价下级view是否显示

                pasteTagNameViewShow: false, // 贴标签View是否显示
                cancleTagNameViewShow: false, // 取消标签View是否显示
                withdrawServicesViewShow: false, // 提现服务系数View是否显示

                userId: "",
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                addOrUpdateVisible: false,
                bookmanages: true,
                radio: '1',
                elevationTitle: "评价",
            };
        },
        mounted() {
            this.getQuarterTime();
            // this.getDataList();
            this.getTagNameDataList()

        },
        methods: {
            setbig() {
                this.bigsrc = 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIWlliaQwAmTODz9ec0tXFUicfhZP9qmJmot4vib7ZC3c9vmqXkSlL21sSHw8IcBLicrazZAGxXszr8FA/132'
                this.showbig = true
            },
            hidebig() {
                this.showbig = false
            },
            search() {
                this.pageIndex = 1;
                this.getDataList();
            },
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true;
                let obj = {
                    page: this.pageIndex,
                    limit: this.pageSize
                };
                if (this.dataForm.quarterTime) {
                    obj.quarterTime = this.dataForm.quarterTime;
                }
                if (this.dataForm.tagId) {
                    obj.tagId = this.dataForm.tagId;
                }
                if (this.dataForm.nickname) {
                    obj.nickname = this.dataForm.nickname;

                }

                if (this.dataForm.phone) {
                    obj.phone = this.dataForm.phone;
                }
                if (this.dataForm.avgWholeScore) {
                    obj.isEvaluated = this.dataForm.avgWholeScore;
                }
                this.$http({
                    url: this.$http.adornUrl("/value/valuecommentinfo/list"),
                    method: "get",
                    params: this.$http.adornParams(obj)
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.dataList = data.page.list;
                        this.totalPage = data.page.totalCount;
                        this.isShow = data.isFlag === 1
                        this.elevationTitle = this.isShow ? "评价" : "评价结果";

                    } else {
                        this.dataList = [];
                        this.totalPage = 0;
                    }
                    this.dataListLoading = false;
                });
            },

            // 获取季度列表
            getQuarterTime() {
                const that = this
                this.$http({
                    url: this.$http.adornUrl("/value/valuecommentinfo/getQuarterTime"),
                    method: "get",
                }).then(({data}) => {
                    if (data && data.code === 0) {

                        // this.datetime.length = 0;
                        that.dateTime = []

                        let arr = []
                        for (let i = 0; i < data.quarterTime.length; i++) {

                            let dateStr = data.quarterTime[i];
                            let dateYearStr = dateStr.slice(0, 4);
                            let dateMonthStr = dateStr.slice(4, 6);
                            let dateLabel = dateYearStr + "." + dateMonthStr + "-" + dateYearStr + "." + (parseInt(dateMonthStr) + 2);
                            let obj = {
                                val: dateStr,
                                label: dateLabel
                            }
                            arr.push(obj);
                        }

                        that.dataForm.quarterTime = arr[arr.length - 1].val
                        that.dateTime = arr

                        that.getDataList()

                    } else {

                    }
                });
            },

            // 获取数据列表
            getTagNameDataList() {
                let obj = {
                    page: this.pageIndex,
                    limit: 100
                };

                this.$http({
                    url: this.$http.adornUrl("/value/tag/list"),
                    method: "get",
                    params: this.$http.adornParams(obj)
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        if (data.page.list) {
                            let tagNameList = []
                            data.page.list.map(item => {
                                let tagNameObject = {
                                    val: item.id,
                                    label: item.tagName
                                }
                                tagNameList.push(tagNameObject)
                            })
                            tagNameList.unshift({val: null, label: "全部"})
                            this.options = tagNameList
                        }
                    }
                });
            },


            //查看结果
            viewResult(data, time, isShow) {
                this.valueManagerListShow = false
                this.resultShow = true
                this.$nextTick(() => {
                    this.$refs.resultShow.init(data, time, isShow)
                })
            },
            backcon() {
                this.valueManagerListShow = true
                this.resultShow = false
            },
            // 运营评价
            operationalEvaluationAction(id, ischange) {
                this.$nextTick(() => {
                    this.$refs.examinevaluate.init(id, ischange)
                })
            },

            //评价下级 jackie专有
            evaluationSubordinatesAction() {
                this.valueManagerListShow = false;
                this.evaluationSubordinatesViewShow = true;
            },
            //修改运营评价
            changeOperationalEvaluationAction() {

            },

            //提现服务系数修改
            withdrawServicesAction(userId, ratio) {

                this.withdrawServicesUserId = ""
                this.withdrawServicesRatio = ""

                this.dataForm.withdrawServices = ratio
                this.withdrawServicesUserId = userId

                this.withdrawServicesViewShow = true;
            },
            // 提现服务系数确认修改
            withdrawServicesDialogAction() {
                if(this.dataForm.withdrawServices){
                    if(this.dataForm.withdrawServices.toString().indexOf('.')>-1&&this.dataForm.withdrawServices.toString().split('.')[1].length>1){
                        this.$message({
                            message: '请保留一位小数',
                            type: "error"
                        })
                        return false
                    }
                } else {
                    this.$message({
                        message: '请输入正确格式的数字',
                        type: "error"
                    })
                    return false
                }
                let data = {
                    userId: this.withdrawServicesUserId,
                    ratio: this.dataForm.withdrawServices,
                    quarterTime: this.dataForm.quarterTime
                }
                this.$http({
                    url: this.$http.adornUrl("/value/valuecommentinfo/updateUserRatio"),
                    method: "post",
                    data: this.$http.adornData(data)
                }).then(({data}) => {
                    if (data.code === 0) {

                        this.withdrawServicesViewShow = false;
                        this.getDataList();

                        this.$message({
                            message: "修改成功",
                            type: "success"
                        })

                    } else if (data.code === 500) {
                        this.$message({
                            message: data.msg,
                            type: "error"
                        })
                    }
                })


            },
            //贴标签
            pasteTagNameAction(userId) {

                this.pasteTagUserId = "";
                this.pasteTagId = "";
                this.dataForm.diaLogTagName = "";

                this.pasteTagUserId = userId;
                this.pasteTagNameViewShow = true;
            },
            //更改标签
            changeTagNameAction(userId, tagId) {
                this.pasteTagUserId = "";
                this.pasteTagId = "";
                this.dataForm.diaLogTagName = "";

                this.pasteTagUserId = userId;
                this.pasteTagId = tagId;
                this.dataForm.diaLogTagName = tagId.toString();
                this.pasteTagNameViewShow = true;
            },

            // 贴标签dialog 确定
            pasteTagNameDialogAction() {

                if (this.dataForm.diaLogTagName === "") {
                    this.$message("请选择标签");

                    return false
                }

                if (this.dataForm.diaLogTagName === this.pasteTagId) {
                    this.$message("不要重复选择同一个标签");

                    return false
                }

                let data = {
                    // id:this.pasteTagId,
                    userId: this.pasteTagUserId,
                    tagId: this.dataForm.diaLogTagName
                }

                this.$http({
                    url: this.$http.adornUrl("/value/usertagrelation/saveOrUpdate"),
                    method: "post",
                    data: this.$http.adornData(data)
                }).then(({data}) => {
                    if (data.code === 0) {

                        this.pasteTagNameViewShow = false;
                        this.getDataList();

                        this.$message({

                            message: this.pasteTagName ? "修改成功" : "添加成功",
                            type: "success"
                        })

                    } else if (data.code === 500) {
                        this.$message({
                            message: data.msg,
                            type: "error"
                        })
                    }
                })

            },

            //取消标签
            cancleTagNameAction(userId, tagId) {

                this.pasteTagUserId = "";
                this.pasteTagId = "";
                this.dataForm.diaLogTagName = "";

                this.pasteTagUserId = userId;
                this.pasteTagId = tagId;

                this.cancleTagNameViewShow = true;

            },


            cancleTagNameDialogAction() {

                let data = {
                    // id:this.pasteTagId,
                    userId: this.pasteTagUserId,
                    tagId: this.pasteTagId
                }

                this.$http({
                    url: this.$http.adornUrl("/value/usertagrelation/delete"),
                    method: "delete",
                    data: this.$http.adornData(data)
                }).then(({data}) => {
                    if (data.code === 0) {

                        this.cancleTagNameViewShow = false;
                        this.getDataList();

                        this.$message({

                            message: "取消成功",
                            type: "success"
                        })

                    } else if (data.code === 500) {
                        this.$message({
                            message: data.msg,
                            type: "error"
                        })
                    }
                })


            },

            goBack() {
                this.evaluationSubordinatesViewShow = false;
                this.valueManagerListShow = true;
            },

            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val;
                this.pageIndex = 1;
                this.getDataList();
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val;
                this.getDataList();
            },

            download() {
                let obj = {
                    page: this.pageIndex,
                    limit: this.pageSize
                };
                obj.quarterTime = this.dataForm.quarterTime;
                obj.tagId = this.dataForm.tagId;
                obj.isEvaluated = this.dataForm.avgWholeScore;
                obj.phone = this.dataForm.phone;
                obj.nickname = this.dataForm.nickname;
                // obj.userId = this.dataForm.userId;
                // obj.grade = this.dataForm.grade;
                // obj.title = this.dataForm.title;
                this.$http({
                    url: this.$http.adornUrl("/value/valuecommentinfo/list/download"),
                    method: "get",
                    params: this.$http.adornParams(obj),
                    headers: {
                        'Content-Type': 'application/json; application/octet-stream'
                    },
                    responseType: 'arraybuffer'
                }).then(({data}) => {
                    const blob = new Blob([data], {type: 'application/vnd.ms-excel'})
                    const downloadElement = document.createElement('a')
                    const href = window.URL.createObjectURL(blob)
                    downloadElement.href = href
                    downloadElement.download = '价值观考核管理列表.xls'
                    document.body.appendChild(downloadElement)
                    downloadElement.click()
                    document.body.removeChild(downloadElement) // 下载完成移除元素
                    window.URL.revokeObjectURL(href) // 释放掉blob对象
                })
            }

        }
    }
</script>

<style scoped>

</style>
